<template>
  <div class="active-content">
    <!--分页列表-->
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading">
      <template v-for="(col, index) in columns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.slot"></slot>
        <!-- 普通列 -->
        <el-table-column v-else
                         :key="index"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :formatter="col.formatter"
                         :align="col.align">
        </el-table-column>
      </template>
    </el-table>
    <div class="paginations" v-if="tableData.length > 0" >
      <div class="page-num">
        <div class="turn-page">
          <i class="el-icon-my-page-lower" @click="pageReduce"></i>
          <i class="el-icon-my-page-upper" @click="pageAdd"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as commonApi from "api/common";
  import iTable from "common/iTable";

  export default {
    name: "order",
    components: {
      iTable
    },
    data(){
      return {
        userId: '',
        columns: [ //列表头
          {label: '商品名称', prop: 'goodsName', width: '120', align: 'center'},
          {label: '订单编号', prop: 'orderNo', width: '240', align: 'center'},
          {label: '金额', prop: 'orderAmount', width: '140', align: 'center'},
          {label: '支付方式', prop: 'paymentTypeName', width: '120', align: 'center'},
          {label: '交易时间', prop: 'tradeDate', width: '240', align: 'center'},

          {slot: 'invoiceStatusName'},
          {slot: 'sourceStatusName'},
        ],
        loading: false, //列表加载
        pageObj: { //分页列表参数
          id: 'invoiceId', //分页数据中的主键id
          sizes: [10, 20, 50, 100], //分页数
          size: 5, //当前分页数
          total: 0, //总数
          totalPage: 0, //总页数
          currentPage: 1, //当前页
          pageFunc:(currentPage) =>{ //点击分页
            this.receiveCurrentPage(currentPage)
          },
          pageSizeFunc:(currentPage) =>{ //改变分页尺寸
            this.receivePageSize(currentPage)
          }
        },
        tableData: [], //列表数据
      }
    },
    created() {
      console.log('----------order created-------------')
      let user = JSON.parse(sessionStorage.getItem("user"))
      this.userId = user.userId
      this.getTableDate()
    },
    mounted() {
      console.log('----------order mounted-------------')
    },
    methods: {
      getTableDate(){ //获取列表数据
        const params = {}
        params.userId = this.userId
        params.limit = this.pageObj.size
        params.offset = (this.pageObj.currentPage - 1) * this.pageObj.size
        commonApi.findOrderList(params).then(res => {
          this.loading = false
          let {data} = res;
          if (data.status === 200) {
            this.pageObj.total = data.data.total
            this.tableData = data.data.rows
            this.pageObj.totalPage = Math.ceil(data.data.total / this.pageObj.size)
          }
        })
      },

      pageAdd(){ //页码加1
        let ps = this.pageObj.currentPage
        let n = this.pageObj.totalPage
        if (ps < n){
          ps+=1
          this.pageObj.currentPage = ps
          this.getTableDate()
        } else {
          this.$msg({text: '没有更多的数据了', type: 'info'})
        }
      },
      pageReduce(){//页码减1
        let ps = this.pageObj.currentPage
        if (ps > 1){
          ps-=1
          this.pageObj.currentPage = ps
          this.getTableDate()
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1600px){
    .active-content{
      margin: 0 50px;
      /deep/ .el-table{
        min-height: 310px;
      }
      /deep/ .el-table--scrollable-x .el-table__body-wrapper{
        min-height: 40vh;
      }
      /deep/ .el-table th>.cell{
        color: #333333;
      }
      /deep/ .el-table th{
        background: #F7F7FA;
      }
      /deep/ .el-table tr{
        color: #999999;
      }
      .paginations{
        position: relative;
        width: 800px;
        .page-num{
          text-align: center;
          margin: 20px;
          /deep/ .el-select{
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border:1px solid rgba(204,204,204,1);
                border-radius:16px;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }
        }
        .turn-page{
          display: inline-block;
          padding-left: 36px;
          .el-icon-my-page-upper{
            cursor: pointer;
            background: url("../../assets/img/page-lower.png") center no-repeat;
            background-size: 18px;
            width: 30px;
            line-height: 2;
            padding-left: 20px;

          }
          .el-icon-my-page-lower{
            cursor: pointer;
            background: url("../../assets/img/page-upper.png") center no-repeat;
            background-size: 18px;
            width: 30px;
            line-height: 2;
          }
          .el-icon-my-page-lower:before {
            content: "替";
            visibility: hidden;
          }
          .el-icon-my-page-upper:before {
            content: "替";
            visibility: hidden;
          }

        }
      }
    }
  }
  @media screen and (min-width: 1600px){
    .active-content{
      padding: 0 50px;
      /deep/ .el-table{
        min-height: 470px;
      }
      /deep/ .el-table--scrollable-x .el-table__body-wrapper{
        min-height: 40vh;
      }
      /deep/ .el-table th>.cell{
        color: #333333;
      }
      /deep/ .el-table th{
        background: #F7F7FA;
      }
      /deep/ .el-table tr{
        color: #999999;
      }
      .paginations{
        position: relative;
        width: 800px;
        .page-num{
          text-align: center;
          margin: 20px;
          /deep/ .el-select{
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border:1px solid rgba(204,204,204,1);
                border-radius:16px;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }
        }
        .turn-page{
          display: inline-block;
          padding-left: 36px;
          .el-icon-my-page-upper{
            cursor: pointer;
            background: url("../../assets/img/page-lower.png") center no-repeat;
            background-size: 18px;
            width: 30px;
            line-height: 2;
            padding-left: 20px;

          }
          .el-icon-my-page-lower{
            cursor: pointer;
            background: url("../../assets/img/page-upper.png") center no-repeat;
            background-size: 18px;
            width: 30px;
            line-height: 2;
          }
          .el-icon-my-page-lower:before {
            content: "替";
            visibility: hidden;
          }
          .el-icon-my-page-upper:before {
            content: "替";
            visibility: hidden;
          }

        }
      }
    }
  }

</style>
